<template>
  <div class="app-container" c-loading="loading">
    <el-form label-position="top" :model="blogData">
      <el-form-item prop="title">
        <el-input v-model="blogData.title" placeholder="请输入博客标题"/>
      </el-form-item>
    </el-form>
    <div style="width: 100%">
      <mavon-editor
          ref="editor"
          v-model="blogData.originalContent"
          class="editor"
          :ishljs="true"
          @change="editing"
          @save="saveDraftMsgBox"
          @imgAdd="addImage"
          @fullScreen="editorFullscreen"
          @helpToggle="editorNoteHelpToggle"
      />
    </div>

    <div class="operation footer-toolbar">
      <el-button size="mini" type="success" @click="openDialog">添加附件</el-button>
      <el-button size="mini" type="info" @click="saveDraftMsgBox">{{ this.blogData.id ? '更新草稿' : '保存草稿' }}</el-button>
      <el-button size="mini" type="primary" @click="openPublishDrawer">发布</el-button>
    </div>
    <setting ref="publishDrawer" @handleClose="drawerClose"/>
    <import-attachment-list ref="importAttachment"></import-attachment-list>
  </div>
</template>

<script>
import {addDraftBlog, getBlogById, updateBlog} from '@/api/blog/blog'
import {uploadAttachment} from '@/api/blog/attachment'
import setting from "@/views/Blog/Setting"
import ImportAttachmentList from "@/views/Blog/ImportAttachment";

export default {
  name: 'WriteBlog',
  components: {
    ImportAttachmentList,
    setting,
  },
  data() {
    return {
      blogData: {
        originalContent: '',
        //需要配置的内容：
        formatContent: '',
        title: '',
        url: '',
        summary: '',
        thumbnail: '',
        topRank: 0,
        category: {id: null, name: ''},
        tags: [],
        allowComment: "1"
      },
      loading: false
    }
  },
  watch: {
    $route(to, from) {
      this.getBlog()
    }
  },
  created() {
    this.getBlog()
  },
  methods: {
    // 编辑
    editing(md, html) {
      this.blogData.formatContent = html
    },
    //保存草稿确认框
    saveDraftMsgBox() {
      this.$confirm('您要把此文章保存至草稿箱吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确认
        this.saveDraft()
      }).catch(() => { // 取消
      })
    },
    //保存草稿
    saveDraft() {
      this.loading = true
      this.blogData.statu = 1
      const data = this.blogData
      if (typeof (this.$route.query.blogId) === "undefined") {
        addDraftBlog(data).then(res => {
          this.loading = false
          this.$message.success(res.message)
          this.$router.push({path: '/blog/list'})
        })
      } else {
        updateBlog(data).then(res => {
          this.loading = false
          this.$message.success(res.message)
          this.$router.push({path: '/blog/list'})
        })
      }
    },
    //添加图片的回调
    addImage(pos, $file) {
      const formData = new FormData()
      formData.append('file', $file)
      uploadAttachment(formData).then(resp => {
        this.$message.success(resp.message)
        const url = this.baseUrl + resp.data.path
        this.$refs.editor.$img2Url(pos, url)
      })
    },
    //切换全屏编辑的回调事件(boolean: 全屏开启状态)
    editorFullscreen() {

    },
    // 查看帮助的回调事件(boolean: 帮助开启状态)
    editorNoteHelpToggle(status, value) {

    },
    //发布按钮响应按钮
    openPublishDrawer() {
      this.$refs.publishDrawer.openDrawer()
      this.$refs.publishDrawer.setData(this.blogData)
      this.publishDrawer = true
    },
    //setting关闭时的回调
    drawerClose(data) {
      this.blogData = data
    },
    //获取博客详细信息
    getBlog() {
      const blogId = this.$route.query.blogId
      if (blogId) {
        const params = {id: blogId}
        getBlogById(params).then(res => {
          this.blogData.id = blogId
          this.blogData = res.data
        }).catch(() => {
          this.blogData = {}
        })
      }
    },
    openDialog() {
      this.$refs.importAttachment.openDialog()
    }
  }
}
</script>
<style scoped>
.editor {
  min-height: 70vh;
}

.operation {
  width: calc(100% - 276px);
  transition: all .3s;
}

.footer-toolbar {
  z-index: 2000;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 56px;
  line-height: 56px;
  padding: 0 24px;
  background-color: #fff;
  border-top: 1px #e8e8e8 solid;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .03);
  text-align: right;
}
</style>
